<template>
  <el-dialog
    v-model="visibility"
    :title="config.button.text.view"
    append-to-body
    draggable
    :close-on-click-modal="false">
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item label="仓储费名称"> {{ props.sonRowData.name }} </el-descriptions-item>
      <el-descriptions-item label="仓储费（元/吨）"> {{ props.sonRowData.storageChargeFee }} </el-descriptions-item>
      <el-descriptions-item label="是否按照时间段"> {{ props.sonRowData.isTimeSection ? '是' : '否' }} </el-descriptions-item>
    </el-descriptions>
    <el-table max-height="300px" :data="sectionRuleList" style="width: 100%;margin-top: 10px;" border="1">
      <el-table-column prop="startDay" label="开始天数" :resizable="false"/>
      <el-table-column prop="endDay" label="结束天数" :resizable="false"/>
      <el-table-column prop="ratio" label="比率" :resizable="false"/>
    </el-table>
    <template #footer>
      <div>
        <el-button
          type="warning"
          v-if="appStore.isPhone&&props.sonRowData.showEdit"
          @click="editInfo">
          {{ config.button.text.edit }}
        </el-button>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,watch } from "vue";
import config from "@/common/element-plus/config";
import { useAppStore } from "@/stores/app"
import { formatDateTime } from "@/common/utils/date";

const appStore = useAppStore()

const visibility = ref(false)

const props = defineProps(["sonRowData"])

const sectionRuleList = ref([]);

watch(() => visibility.value, (newVal) => {
  if (newVal) {

    if(props.sonRowData.sectionRuleJson){
      sectionRuleList.value = JSON.parse(props.sonRowData.sectionRuleJson);
    }else{
      sectionRuleList.value = []
    }
  }
}, { immediate: true })

const emits = defineEmits(["editInfo"])

const editInfo = () => {
  visibility.value=false;
  emits("editInfo",props.sonRowData);
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped></style>
